<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
</head>

<body>
    <button id="btn">点击获取数据</button>
    <script>
        $('#btn').click(function() {
            // axios
            //     .get('http://www.liulongbin.top:3006/api/getbooks')
            //     .then(function(res) {
            //         console.log(res.data);
            //     });
            // axios
            //     .get('http://www.liulongbin.top:3006/api/getbooks?id=123')
            //     .then(function(res) {
            //         console.log(res.data);
            //     });
            // axios
            //     .get('http://www.liulongbin.top:3006/api/getbooks', {
            //         params: {
            //             id: 1,
            //         },
            //     })
            //     .then(function(res) {
            //         console.log(res.data);
            //     });
            // axios
            //     .get('http://www.liulongbin.top:3006/api/getbooks', {
            //         params: {
            //             id: 161,
            //             bookname: '金瓶梅',
            //         },
            //     })
            //     .then(function(res) {
            //         console.log(res.data);
            //     });
            // axios发送post请求 post(url[, data[, config]])
            // post 参数一：请求地址
            // post 参数二：表示请求参数，可选的
            // post 参数三：表示配置对象，可选的
            // 传统的表单提交的数据格式 content-type: application/x-www.form-urlencoded
            // 如下的请求方式，默认发送的是json形式的参数（content-type: application/json）
            // 这种方式的请求参数也需要后台提供支持
            // axios
            //     .post('http://www.liulongbin.top:3006/api/post', {
            //         uname: 'ww',
            //         pwd: '42131',
            //     })
            //     .then(function(res) {
            //         console.log(res);
            //     });
            // axios发送post请求 post(url[, data[, config]])
            // post 参数一：请求地址
            // post 参数二：表示请求参数，可选的
            // post 参数三：表示配置对象，可选的
            // 强制post发送这种格式请求参数 content-type: application/x-www.form-urlencoded
            // 类似于FormData的用法，专门用于参数传递
            // URLSearchParams 是一个标准的构造函数，类似于FormData，属于新的API
            // var fd = new URLSearchParams();
            // fd.append('uname', 'zl');
            // fd.append('pwd', '241412');
            // axios
            //     .post('http://www.liulongbin.top:3006/api/post', fd)
            //     .then(function(res) {
            //         console.log(res);
            //     });
            // axios更加通用的调用接口方式
            // axios({
            //     method: 'GET',
            //     url: 'http://www.liulongbin.top:3006/api/getbooks',
            //     params: {
            //         id: 161,
            //         bookname: '金瓶梅',
            //     },
            // }).then(function(res) {
            //     console.log(res.data);
            // });
            var fd = new URLSearchParams();
            fd.append('name', 'tq');
            fd.append('age', '15');
            axios({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: fd,
            }).then(function(res) {
                console.log(res);
            });
        });
    </script>
</body>

</html>